<template>
  <div>
    <el-form :model="tagForm" :rules="tagFormRoles" ref="tagForm" label-width="10em">
      <h-box header="编辑会员标签">
        <el-form-item label="标签名称" prop="tagName">
          <el-input v-model="tagForm.tagName" placeholder="请输入标签名称，最多 16 个字" style="width: 20em"></el-input>
        </el-form-item>
        <el-form-item label="自动打标签条件:">
          <div class="hui-color-text-regular">各条件之间为 "或者" 关系，不是 "并且" 关系</div>
        </el-form-item>
        <el-form-item label="累计消费金额" prop="expenseSum">
          <el-input v-model.number="tagForm.expenseSum" placeholder="例如 500" style="width: 15em">
            <template slot="prepend">满</template>
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="累计消费次数" prop="expenseCount">
          <el-input v-model.number="tagForm.expenseCount" placeholder="例如 3" style="width: 15em">
            <template slot="prepend">满</template>
            <template slot="append">次</template>
          </el-input>
        </el-form-item>
        <el-form-item label="累计储值金额" prop="balanceSum">
          <el-input v-model.number="tagForm.balanceSum" placeholder="例如 1000" style="width: 15em">
            <template slot="prepend">满</template>
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="累计领取优惠券" prop="couponGet">
          <el-input v-model.number="tagForm.couponGet" placeholder="例如 3" style="width: 15em">
            <template slot="prepend">满</template>
            <template slot="append">张</template>
          </el-input>
        </el-form-item>
        <el-form-item label="累计核销优惠券" prop="couponConsume">
          <el-input v-model.number="tagForm.couponConsume" placeholder="例如 1" style="width: 15em">
            <template slot="prepend">满</template>
            <template slot="append">张</template>
          </el-input>
        </el-form-item>
        <el-form-item slot="footer" class="hui-mb-0">
          <el-button @click="handleSubmit('tagForm')" type="primary" :loading="loading" :disabled="disabled">保存</el-button>
          <el-button @click="handleBack">返回</el-button>
        </el-form-item>
      </h-box>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tagForm: {
        tagName: '',
        expenseSum: undefined,
        expenseCount: undefined,
        balanceSum: undefined,
        couponGet: undefined,
        couponConsume: undefined
      },
      tagFormRoles: {
        tagName: [
          {
            required: true,
            message: '请输入标签名称',
            trigger: 'blur'
          },
          {
            max: 16,
            message: '标签名称最多 16 个字',
            trigger: 'blur, change'
          }
        ],
        expenseSum: [
          {
            type: 'number',
            min: 1,
            message: '累计消费金额最少 1 元',
            trigger: 'blur, change'
          }
        ],
        expenseCount: [
          {
            type: 'number',
            min: 1,
            message: '累计消费次数最少 1 次',
            trigger: 'blur, change'
          }
        ],
        balanceSum: [
          {
            type: 'number',
            min: 1,
            message: '累计储值金额最少 1 元',
            trigger: 'blur, change'
          }
        ],
        couponGet: [
          {
            type: 'number',
            min: 1,
            message: '累计领取优惠券 1 张',
            trigger: 'blur, change'
          }
        ],
        couponConsume: [
          {
            type: 'number',
            min: 1,
            message: '累计核销优惠券 1 张',
            trigger: 'blur, change'
          }
        ]
      },
      loading: false,
      disabled: false
    }
  },
  created () {
    this.setType()
  },
  methods: {
    setType () {
      let type = this.$route.query.type
      if (type === 'edit') {
        this.initMockData()
      }
    },
    initMockData () {
      let tagForm = {
        tagName: '标签名称1',
        expenseSum: 10000,
        expenseCount: 10,
        balanceSum: undefined,
        couponGet: undefined,
        couponConsume: undefined
      }
      this.tagForm = tagForm
    },
    handleBack () {
      this.$router.back()
    },
    handleSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('提交！')
          this.$loading()
          this.loading = true
          setTimeout(() => {
            this.submitSuccess()
            this.$loading().close()
          }, 1000)
        } else {
          console.log('表单校验失败！')
          this.loading = false
          return false
        }
      })
    },
    submitSuccess () {
      this.$message({
        message: '会员标签保存成功！',
        type: 'success'
      })
      this.handleBack()
    }
  }
}
</script>

<style lang="less">

</style>
